<template>
  <div class="app-container">
    <!-- 查询 -->
    <el-row>
      <el-col class="mb-2">
        <el-input
          v-model="query.search_value"
          class="ya-search-value mr-6"
          placeholder="请输入人员姓名"
          clearable
        />
        <el-button type="primary" @click="search()">查询</el-button>
        <el-button title="重置" @click="refresh()">重置
          <!-- <svg-icon icon-class="refresh" /> -->
        </el-button>
      </el-col>
    </el-row>
    <!-- 列表 -->
    <el-table ref="table" v-loading="loading" :data="data" :height="height">
      <el-table-column prop="real_name" label="姓名" />
      <el-table-column prop="nickname" label="账号昵称" min-width="100" />
      <el-table-column prop="username" label="登录账号" min-width="100" />
      <el-table-column prop="phone" label="手机号" min-width="120" />
      <el-table-column prop="wechat_titles" label="关联公众号" min-width="120">
        <template #default="scope">
          {{ scope.row.wechat_titles || '/' }}
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="注册时间" width="165" />
      <el-table-column prop="update_time" label="审核时间" width="165" />
      <el-table-column prop="status" label="审核状态">
        <template #default="scope">
          <div v-if="scope.row.status === 0">待审核</div>
          <div style="color: #67c23a" v-if="scope.row.status === 1">通过</div>
          <div style="color: #f56c6c" v-if="scope.row.status === 2">不通过</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" fixed="right">
        <template #default="scope">
          <el-link
            v-if="scope.row.status === 0"
            type="primary"
            class="mr-1"
            :underline="false"
            @click="getBind(scope.row)"
            >账号审核</el-link
          >
          <!-- <el-link type="primary" :underline="false" @click="selectOpen('dele', [scope.row])">
            删除
          </el-link> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="count > 0"
      v-model:total="count"
      v-model:page="query.page"
      v-model:limit="query.limit"
      @pagination="list"
    />
    <!-- 审核并绑定 -->
    <el-dialog
      :title="`当前处理【${bindItem.real_name}】的账号，并为其指定公众号`"
      v-model="dialogVisible"
      :close-on-click-modal="false"
      width="600"
      :before-close="handleClose"
    >
      <div>
        <el-transfer
          filterable
          filter-placeholder="请输入城市拼音"
          :filter-method="filterMethod"
          :titles="['公众号', '已选']"
          v-model="value"
          :data="transferData"
        />
      </div>
      <template #footer>
        <el-button :loading="loading" @click="dialogVisible = false">取消</el-button>
        <el-button :loading="loading" @click="bindSubmit(2)">审核不通过</el-button>
        <el-button :loading="loading" type="primary" @click="bindSubmit(1)">审核通过</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import screenHeight from '@/utils/screen-height'
import Pagination from '@/components/Pagination/index.vue'
import { getPageLimit } from '@/utils/settings'
import {
  getUserApplyList,
  dele,
  wechatUserAdd,
  wechatList,
  UserApplyExamine
} from '@/api/system/user'
import { myWechats } from '@/api/home-page/home-page'

export default {
  name: 'SystemUser',
  components: { Pagination },
  data() {
    return {
      dialogVisible: false, //绑定
      transferData: this.generateData(), //公众号列表
      value: [], //绑定的值
      bindItem: {}, //点击的对象数据
      filterMethod(query, item) {
        return item.label.indexOf(query) > -1
      },
      height: 680,
      loading: false,
      query: {
        page: 1,
        limit: getPageLimit(),
        search_field: 'real_name',
        search_exp: '=',
        search_value: ''
      },
      data: [],
      count: 0
    }
  },
  created() {
    this.height = screenHeight()
    this.list()
  },
  methods: {
    // 绑定提交
    bindSubmit(status) {
      if (status === 1 && !this.value) {
        return ElMessage.warning('请为其指定公众号')
      }
      let ids = []
      if (this.value) {
        this.value.forEach((element) => {
          ids.push(element)
        })
      }
      UserApplyExamine({
        apply_id: this.bindItem.apply_id,
        status,
        ids: ids
      }).then((res) => {
        if (res.code == 200) {
          this.dialogVisible = false
          ElMessage.success(res.msg)
          this.list()
        }
      })
    },
    // 绑定弹窗
    getBind(item) {
      this.dialogVisible = true
      this.bindItem = item
      this.value = item.wechat_list
    },
    // 公众号列表
    generateData() {
      const data = []
      myWechats({}).then((res) => {
        res.data.list.forEach((element, index) => {
          data.push({
            label: element.title,
            key: element.wechat_id
          })
        })
      })
      return data
    },
    // 列表
    list() {
      this.loading = true
      getUserApplyList(this.query)
        .then((res) => {
          this.data = res.data.list
          this.count = res.data.count
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 查询
    search() {
      this.query.page = 1
      this.list()
    },
    // 刷新
    refresh() {
      this.query.search_value = ''
      this.search()
    },
    // 删除
    dele(row) {
      dele({
        ids: this.selectGetIds(row)
      })
        .then((res) => {
          this.list()
          ElMessage.success(res.msg)
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>
